<template>
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">
          <el-scrollbar>
            <el-menu router unique-opened :default-active="$route.path">
              <el-sub-menu v-for="item in menuData" :index="item.path" :key="item.id">
                <template #title>
                  {{ item.name }}
                </template>
                <el-menu-item v-for="item1 in item.children" :index="`${item.path}/${item1.path}`" :key="item1.id">
                  {{ item1.name }}
                </el-menu-item>
              </el-sub-menu>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import {useMenuStore} from '@/stores/menu'
import {storeToRefs} from 'pinia'

let menuStore = useMenuStore()
let {menuData} = storeToRefs(menuStore)
</script>

<style scoped lang="scss">

</style>